<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { width: 975px; margin:0 auto; }
ul { list-style: none; }

header { height: 120px; background-color: yellow; }
nav	{ height: 35px; background-color: green; }

#content { min-height: 550px; background-color: blue; }
aside { width: 200px; height: 300px; float: left; background-color: skyblue; }
aside li { display:block; padding: 10px;}

#banner { width: 775px; height: 300px; float: left; background-color: pink; text-align: center; vertical-align: middle; position:relative;}
#banner p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 10%; margin: auto; }
#banner ul { position: absolute; top: 80%; left:80%; }
#banner li { float:left; padding: 0 5px; }

#prodList { clear: both; height: 300px; background-color: grey; padding:10px; position: relative;}
#prodList ul { position: absolute; top:50px; bottom:0; left:0; right:0; height:150px; margin:auto; }
#prodList li { float: left; padding: 0 35px; }
#prodList img { width: 80px; height: 100px; }

footer { height: 100px; background-color: red; font:"나눔고딕", bold, 8px; }
#sitemap ul { margin: 0;	padding: 10px;	border: 0;}
#sitemap li { list-style:none; margin:0; padding:0 10px; border:0;}
#sitemap>div { float:left; }
#copy { float:right; }

</style>
</head>
<body>
	<header>
		<h1><div id="logo"></div></h1>
		<p>Log in or Create Account</p>
		<ul>
			<li>contack |</li>
			<li>store locatior |</li>
			<li>support |</li>
			<li>CART</li>
		</ul>
	</header>
	
	<nav>
		<input type="text"/>
		<select>
			<option>category</option>
			<option>title</option>
			<option>writer</option>
		</select>
		<button>SEARCH</button>
	</nav>
	
	<div id="content">
		<aside>
			<ul>
				<li><a href="#">All categories</a></li>
				<li><a href="#">Category1</a></li>
				<li><a href="#">Category2</a></li>
				<li><a href="#">Category3</a></li>
				<li><a href="#">Category4</a></li>
				<li><a href="#">Category5</a></li>
				<li><a href="#">Category6</a></li>
			</ul>
		</aside>
		
		<section id="banner">
			<p>[ PROMOTIONAL IMAGES ROTATE HERE ]</p>
			<ul id="bannerNum">
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
			</ul>
		</section>
		
		<section id="prodList">
			<h3>Today's Specials</h3>
			<ul>
				<li><div><img src="img/suzy1.jpg"/></div><p>Product 1</p></li>
				<li><div><img src="img/suzy2.jpg"/></div><p>Product 2</p></li>
				<li><div><img src="img/suzy3.jpg"/></div><p>Product 3</p></li>
				<li><div><img src="img/suzy4.jpg"/></div><p>Product 4</p></li>
				<li><div><img src="img/suzy5.jpg"/></div><p>Product 5</p></li>
				<li><div><img src="img/suzy6.jpg"/></div><p>Product 6</p></li>
			</ul>
		</section>
	</div>
	
	<footer>
		<div id="sitemap">
			<div><ul>ABOUT US</ul><li>Company</li><li>News</li><li>Jobs</li><li>Policies</li><li>Contact</li></div>
			<div><ul>SOCIAL</ul><li>Facebook</li><li>Twitter</li><li>Try our app</li></div>
			<div><ul>SERIVCE</ul><li>FAQ</li><li>Live support</li><li>Site map</li></div>
		</div>
		<p id="copy">Copyright(c) 2014. wookee. All rights Reserved. Designed by JSP, XHTML5, CSS3.</p>
	</footer>

</body>
</html>